<!-- Vue组件的模板部分，定义了用户界面 -->
<template>
    <div class="horizontal-container">
      <!-- 使用v-for指令循环遍历items数组，为每个项目创建一个div元素 -->
      <div class="item" v-for="item in items" :key="item.id">
        <!-- 显示项目的名称 -->
        {{ item.name }}
      </div>
    </div>
  </template>
  
  <!-- 脚本部分，包含Vue组件的数据和方法 -->
  <script>
  export default {
    // 组件的数据对象，用于存储数据 -->
    data() {
      return {
        // items数组存储了一系列的项目对象，每个对象都有id和name属性
        items: [
          { id: 1, name: '项目1' },
          { id: 2, name: '项目2' },
          { id: 3, name: '项目3' },
          // ...更多项目
        ]
      }
    }
  }
  </script>
  
  <!-- 样式部分，用于美化组件 -->
  <style>
  /* horizontal-container类用于创建一个水平滚动的容器 */
  .horizontal-container {
    display: flex; /* 使用flex布局 */
    overflow-x: auto; /* 允许水平滚动 */
    white-space: nowrap; /* 防止项目换行 */
    padding: 10px; /* 添加内边距 */
  }
  
  /* item类用于样式化每个项目 */
  .item {
    flex: 0 0 auto; /* 不让项目伸缩 */
    margin-right: 10px; /* 添加项目之间的间隔 */
    width: 300px; /* 设定项目的宽度 */
    height: 200px; /* 设定项目的高度 */
    background:url("/src/assets/imm.jpg") center/cover no-repeat; /* 设置背景图片 */
    display: inline-block; /* 使项目呈行内块级元素 */
    border: 1px solid #ccc; /* 添加边框 */
    text-align: center; /* 文本居中 */
    line-height: 200px; /* 行高与项目高度相同，实现垂直居中 */
  }
  </style>
  